<template>
  <div class="mine">
    <banner url="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg">
      <div class="avatar">
        <img src="https://cdn.pixabay.com/photo/2021/11/14/14/23/woman-6794714_960_720.jpg" alt="">
      </div>
    </banner>
    <div class="cell-list padding-top">
      <cell title="发布" icon="edit"></cell>
      <cell title="我的账户" icon="account"></cell>
    </div>
    <div class="cell-list">
      <cell title="我的收藏" icon="favorites"></cell>
      <cell title="我的关注" icon="follow"></cell>
    </div>
    <div class="cell-list">
      <cell title="设置" icon="settings" :isLink="false"></cell>
      <cell title="帮助" icon="help" :isLink="false"></cell>
    </div>
  </div>
</template>

<script>
import Banner from '@/components/Banner.vue'
import Cell from '@/components/Cell.vue'
export default {
  components: {
    Banner,
    Cell
  }
}
</script>

<style scoped>
.mine {
  background-color: #EEEEEE;
  min-height: 100%;
}
.avatar {
  position: absolute;
  width: 163px;
  height: 163px;
  border-radius: 50%;
  bottom: -80px;
  left: 42px;
  overflow: hidden;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
.avatar > img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.cell-list {
  padding-left: 22px;
  padding-right: 22px;
  margin-bottom: 38px;
}
.cell-list.padding-top {
  padding-top: 120px;
}
</style>
